import React from 'react';
import { Card, Button, Table, Popconfirm, Row, Col, Divider, Breadcrumb } from 'antd';
import { connect } from 'dva';
import AddView from './add';
import GMEditPwdView from './editPwd';
import { Moment } from 'moment';
import { GM as namespaceGM } from '@/constants/ModelNamespaces';

/*~ Note that ES6 modules cannot directly export callable functions.
 *~ This file should be imported using the CommonJS-style:
  *~ import x = require('someLibrary');
  因此Moment接口与moment(timestamp:number)方法需要分别导入.导入可执行函数需要使用nodejs的require方法.
  */
let moment = require('moment');
// const moment = _moment.default || _moment;

interface GmProps{
  state: any;
  query: (pagination?:any, querys?:any)=>void;
  delGM: (id:any)=>void;
  openAddView: ()=>void;
  openEditPwdView: (id:any)=>void;
  loading:boolean;
}


class GMView extends React.Component<GmProps,any> {
  columns;

  constructor(props:GmProps) {
    super(props);

    this.columns = [{
      title: '序号',
      key: 'index',
      width: 60,
      render: function (text, record, index) {
        return index + 1;
      }
    }, {
      title: '账号',
      key: 'username',
      dataIndex: 'username'
    }, {
      title: '注册时间',
      key: 'create_time',
      dataIndex: 'create_time',
      sorter:true,
      sortOrder:'descend',
      render:(text, record) => {
        let momentResult:Moment = moment(record.create_time);
        return momentResult.format('YYYY-MM-DD');
      }
    }, 
    // {
    //   title: '是否冻结',
    //   key: 'deleted',
    //   render:(text, record, index) => {
    //     return record.deleted === 0 ? '否' : '是';
    //   }
    // },
     {
      title: '操作',
      key: 'operation',
      // fixed: 'right',
      //这里需要使用lamda表达式,或者手动给render的函数绑定this.否则报错
      render: (text, record) => {
        const id = record.gm_id;
        return (
          <span>
            <a href="javascript:;" onClick={this.props.openEditPwdView.bind(this, id)} >修改密码</a>
            <Divider type="vertical" />
            <Popconfirm title="确认删除这个角色吗?" onConfirm={this.props.delGM.bind(this, id)}>
              <a href="javascript:;">删除</a>
            </Popconfirm>
          </span>
        );
      }
    }];
  }

  //组件加载完成时,初始化表格内容
  componentDidMount() {
    this.props.query();
  }

  /**
   * Table组件 分页、排序、筛选变化时触发.
   */
  handleTableChange = (pagination, filters, sorter) => {
    this.props.query(pagination);
  };

  render() {
    const { state, loading } = this.props;
    return (
      <div>
        <Breadcrumb>
          <Breadcrumb.Item>系统模块</Breadcrumb.Item>
          <Breadcrumb.Item>GM管理</Breadcrumb.Item>
        </Breadcrumb>
        <Row type="flex" justify="start">
          <Col span={24}>
            <Card>
              <div style={{ 'display': 'inline' }}>
                <Button size="small" type="primary" icon="plus" onClick={this.props.openAddView}>创建</Button>
                <br />
              </div>
              <Table
                dataSource={state.dataSource}
                columns={this.columns}
                rowKey={(record:any) => record.gm_id}
                pagination={state.pagination}
                loading={loading}
                onChange={this.handleTableChange}
              />
            </Card>
          </Col>
        </Row>
        {state.gmAddView.visible && <AddView />}
        {state.editPwdView.visible && <GMEditPwdView />}
      </div>
    );
  }
}



/******************************************************** 容器组件 **********************************/

const mapStateToProps = (state) => {
  return {
    state: state[namespaceGM],
    loading: state.loading.models.gm
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    dispatch: dispatch,
    /**
     * 查询.
     * @param object pagination 分页条件.包括current,pageSize等属性.
        current int 当前页码
        pageSize int 每页记录数
     * @param json query 查询条件,排序条件等
     */
    query: (pagination = {}, querys = {}) => {
      dispatch({ type:`${namespaceGM}/getGMs`, payload:{ pagination, querys } });
    },
    /**
		 * 根据id删除记录.
		 * @param id 记录主键
		 */
    delGM: id => {
      // dispatch(Types.delGMAction(id));
      dispatch({ type:`${namespaceGM}/delGMById`, payload: id });
    },
    
    /**
     * 添加.
     * id=1的GM是超级GM.
     */
    openAddView:() => {
      dispatch({ type: `${namespaceGM}/toggleAddView`, payload: { gmAddView: { visible: true } } });
    },
    openEditPwdView:id => {
      dispatch({ type: `${namespaceGM}/toggleEditPwdView`, payload: { editPwdView: { visible: true, currId:id } } });
    }
  };
};

//连接容器组件和展示组件
export default connect(mapStateToProps, mapDispatchToProps)(GMView);
